<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="活动名称" prop="activityTitle">
        <el-input
          v-model="queryParams.activityTitle"
          placeholder="请输入活动名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="报名状态" clearable>
          <el-option label="待审核" value="0" />
          <el-option label="已通过" value="1" />
          <el-option label="已拒绝" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="20" style="margin-bottom: 20px;">
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>我的学分</span>
          </div>
          <div class="credit-info">
            <div class="credit-value">{{ creditInfo.totalCredits || 0 }}</div>
            <div class="credit-label">总学分</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>已参与活动</span>
          </div>
          <div class="credit-info">
            <div class="credit-value">{{ creditInfo.totalActivities || 0 }}</div>
            <div class="credit-label">活动数</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>本学期学分</span>
          </div>
          <div class="credit-info">
            <div class="credit-value">{{ creditInfo.semesterCredits || 0 }}</div>
            <div class="credit-label">学分</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>待审核活动</span>
          </div>
          <div class="credit-info">
            <div class="credit-value">{{ creditInfo.pendingActivities || 0 }}</div>
            <div class="credit-label">活动数</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="enrollmentList">
      <el-table-column label="报名ID" align="center" prop="enrollmentId" />
      <el-table-column label="活动名称" align="center" prop="activityTitle" />
      <el-table-column label="报名时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="活动时间" align="center" prop="activityTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.activityTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.status === '0'">待审核</el-tag>
          <el-tag type="success" v-else-if="scope.row.status === '1'">已通过</el-tag>
          <el-tag type="danger" v-else-if="scope.row.status === '2'">已拒绝</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDetail(scope.row)"
          >查看详情</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleCancel(scope.row)"
            v-if="scope.row.status === '0'"
          >取消报名</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 详情对话框 -->
    <el-dialog :title="'报名详情 - ' + detailForm.activityTitle" :visible.sync="detailOpen" width="600px" append-to-body>
      <el-form ref="detailForm" :model="detailForm" label-width="100px">
        <el-form-item label="活动名称">
          <span>{{ detailForm.activityTitle }}</span>
        </el-form-item>
        <el-form-item label="活动时间">
          <span>{{ parseTime(detailForm.activityTime) }}</span>
        </el-form-item>
        <el-form-item label="活动地点">
          <span>{{ detailForm.activityLocation }}</span>
        </el-form-item>
        <el-form-item label="报名时间">
          <span>{{ parseTime(detailForm.createTime) }}</span>
        </el-form-item>
        <el-form-item label="联系电话">
          <span>{{ detailForm.phone }}</span>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-tag type="info" v-if="detailForm.status === '0'">待审核</el-tag>
          <el-tag type="success" v-else-if="detailForm.status === '1'">已通过</el-tag>
          <el-tag type="danger" v-else-if="detailForm.status === '2'">已拒绝</el-tag>
        </el-form-item>
        <el-form-item label="审核意见" v-if="detailForm.status !== '0'">
          <span>{{ detailForm.auditRemark || '无' }}</span>
        </el-form-item>
        <el-form-item label="备注">
          <span>{{ detailForm.remark || '无' }}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailOpen = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listMyEnrollment, getMyEnrollment, cancelEnrollment, getMyCredits } from "@/api/education/myEnrollment";

export default {
  name: "MyEnrollment",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 我的报名表格数据
      enrollmentList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        activityTitle: null,
        status: null
      },
      // 学分信息
      creditInfo: {},
      // 详情对话框
      detailOpen: false,
      // 详情表单
      detailForm: {}
    };
  },
  created() {
    this.getList();
    this.getCreditInfo();
  },
  methods: {
    /** 查询我的报名列表 */
    getList() {
      this.loading = true;
      listMyEnrollment(this.queryParams).then(response => {
        this.enrollmentList = response.rows;
        this.total = response.total;
        this.loading = false;
      }).catch(() => {
        // 如果API尚未实现，使用模拟数据
        this.mockData();
      });
    },
    /** 获取学分信息 */
    getCreditInfo() {
      getMyCredits().then(response => {
        this.creditInfo = response.data;
      }).catch(() => {
        // 如果API尚未实现，使用模拟数据
        this.creditInfo = {
          totalCredits: 8.5,
          totalActivities: 12,
          semesterCredits: 3.5,
          pendingActivities: 2
        };
      });
    },
    /** 模拟数据 */
    mockData() {
      this.loading = true;
      setTimeout(() => {
        this.enrollmentList = [
          {
            enrollmentId: 1,
            activityTitle: "校园歌手大赛",
            createTime: "2023-05-15 10:30:00",
            activityTime: "2023-06-01 14:00:00",
            status: "1"
          },
          {
            enrollmentId: 2,
            activityTitle: "志愿者服务活动",
            createTime: "2023-05-20 15:45:00",
            activityTime: "2023-06-05 09:00:00",
            status: "0"
          },
          {
            enrollmentId: 3,
            activityTitle: "创新创业讲座",
            createTime: "2023-05-25 09:15:00",
            activityTime: "2023-06-10 19:00:00",
            status: "2"
          }
        ];
        this.total = 3;
        this.loading = false;
      }, 500);
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 查看详情按钮操作 */
    handleDetail(row) {
      const enrollmentId = row.enrollmentId;
      getMyEnrollment(enrollmentId).then(response => {
        this.detailForm = response.data;
        this.detailOpen = true;
      }).catch(() => {
        // 如果API尚未实现，使用模拟数据
        this.detailForm = {
          enrollmentId: row.enrollmentId,
          activityTitle: row.activityTitle,
          activityTime: row.activityTime,
          activityLocation: "大学生活动中心",
          createTime: row.createTime,
          phone: "13800138000",
          status: row.status,
          auditRemark: row.status === "2" ? "活动名额已满" : "",
          remark: "希望能参加这个活动"
        };
        this.detailOpen = true;
      });
    },
    /** 取消报名按钮操作 */
    handleCancel(row) {
      this.$modal.confirm('确认取消报名"' + row.activityTitle + '"活动吗？').then(() => {
        cancelEnrollment(row.enrollmentId).then(() => {
          this.$modal.msgSuccess("取消报名成功");
          this.getList();
        }).catch(() => {
          // 如果API尚未实现，模拟成功
          this.$modal.msgSuccess("取消报名成功");
          this.getList();
        });
      }).catch(() => {});
    }
  }
};
</script>

<style scoped>
.credit-info {
  text-align: center;
  padding: 10px 0;
}
.credit-value {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 5px;
}
.credit-label {
  font-size: 14px;
  color: #606266;
}
</style> 